<template>
	<div class="wrap_box">
		<div class="wrap">
			<div class="logo_box">
				<img src="../assets/logo.png" class="logo" alt="" />
				<span>耀琰科技</span>
			</div>
			<div x-text="LinkList[0].label"></div>
			<div class="link_wrap">
				<div v-for="(item, index) in LinkList" :key="index" class="link_box">
					<a :href="item.link">{{ item.label }}</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	let LinkList = ref([
		{
			label: "首页",
			link: "",
		},
		{
			label: "产品服务",
			link: "",
		},
		{
			label: "解决方案",
			link: "",
		},
		{
			label: "新闻动态",
			link: "",
		},
		{
			label: "技术服务",
			link: "",
		},
		{
			label: "人员招聘",
			link: "",
		},
		{
			label: "关于我们",
			link: "",
		},
	]);
</script>

<style lang="scss" scoped>
	.wrap_box {
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100vw;
	}
	.wrap {
		height: 6vh;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.logo_box {
			margin-left: 20px;
			font-size: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			> .logo {
				margin-right: 20px;
				width: 2em;
				height: 2em;
			}
		}
		background-color: #313131;
		color: #ffffff;
		> .link_wrap {
			flex-grow: 1;
			display: flex;
			justify-content: center;
			font-size: 16px;
			> .link_box {
				margin-right: 40px;
			}
		}
	}
</style>
